<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5表单组件</title>
  </head>

  <body>
    <!--
​	1）color：颜色
​	2）email：邮箱
​	3）tel：电话号码
​	4）url：网址
​	5）number：数字
​	6）range：范围
​	7）search：搜索
​	8）data：日期
​	9）datetime：日期时间
​	10）datetime-local：本地日期时间
​	11）year：年份
​	12）month：月份
​	13）time：时间
     -->
    <form action="#">
      <!-- 1）color：颜色 可以选择颜色 -->
      <input type="color" /><br />
      <!-- 2）email：邮箱  （有格式验证提示） -->
      <input type="email" placeholder="请输入邮箱" /><br />
      <!-- 3）tel：电话号码   （无格式验证提示） -->
      <input type="tel" placeholder="请输入电话号码" /><br />
      <!-- 4）url：网址  （有格式验证提示） -->
      <input type="url" placeholder="请输入网址" /><br />
      <!-- 5）number：数字  （有step步长 min max value当前值 属性） -->
      <input type="number" step="1" value="3" min="-100" max="100" /><br />
      <!--step步长-->
      <!-- 6）range：范围 会出现一个滑动条（有min max value当前值 属性） -->
      <input type="range" value="10" min="-100" max="100" /><br />
      <!-- 7）search：搜索（搜索框内有清除全部功能） -->
      <input type="search" placeholder="搜索框" /><br />
      <!-- 8）date：日期 -->
      <input type="date" /><br />
      <!-- 9）datetime：日期时间（手动输入 无格式验证） -->
      <input type="datetime" placeholder="请输入日期" /><br />
      <!-- 10）datetime-local：本地日期+时间 -->
      <input type="datetime-local" /><br />
      <input type="week" /><br />
      <input type="time" /><br />
      <input type="month" /><br />
      <input type="year" /><br />
      <input type="submit" />
    </form>
  </body>
</html>
